<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Flex 容器的属性</title>
    <link rel="stylesheet" href="./basic.css" />
    <style>
      .flex-container {
        display: flex;
      }

      /* 1.flex-direction 属性 */
      .flex-1-1 {
        flex-direction: row;
      }
      .flex-1-2 {
        flex-direction: row-reverse;
      }
      .flex-1-3 {
        flex-direction: column;
      }
      .flex-1-4 {
        flex-direction: column-reverse;
      }

      /* 2.flex-wrap 属性 */
      .flex-2-1 {
        flex-wrap: nowrap;
      }
      .flex-2-2 {
        flex-wrap: wrap;
      }
      .flex-2-3 {
        flex-wrap: wrap-reverse;
      }

      /* 3.flex-flow 属性 */
      .flex-3 {
        /* flex-flow: row nowrap; */
        flex-flow: row wrap;
      }

      /* 4.justify-content 属性 */
      .flex-4-1 {
        justify-content: flex-start;
      }
      .flex-4-2 {
        justify-content: flex-end;
      }
      .flex-4-3 {
        justify-content: center;
      }
      .flex-4-4 {
        justify-content: space-between;
      }
      .flex-4-5 {
        justify-content: space-around;
      }

      /* 5.align-items 属性 */
      .flex-5-1 {
        align-items: stretch;
      }
      .flex-5-1 .flex-item {
        height: auto;
      }
      .flex-5-2 {
        align-items: flex-start;
      }
      .flex-5-3 {
        align-items: flex-end;
      }
      .flex-5-4 {
        align-items: center;
      }
      .flex-5-5 {
        align-items: baseline;
      }
      .flex-5-5 .flex-item {
        text-decoration: underline;

        font-size: 40px;
      }
      .flex-5-5 .item-tall {
        font-size: 120px;
      }

      /* 6.align-content 属性 */
      .flex-6 {
        flex-wrap: wrap;
      }
      .flex-6-1 {
        align-content: stretch;
      }
      .flex-6-1 .flex-item {
        height: auto;
      }
      .flex-6-2 {
        align-content: flex-start;
      }
      .flex-6-3 {
        align-content: flex-end;
      }
      .flex-6-4 {
        align-content: center;
      }
      .flex-6-5 {
        align-content: space-between;
      }
      .flex-6-6 {
        align-content: space-around;
      }
    </style>
  </head>
  <body>
    <img src="./flex.png" alt="flex" />

    <!-- 1.flex-direction 属性 -->
    <!-- <div>
      <h2>1.flex-direction 属性</h2>

      <p>row（默认值）：主轴为水平方向，起点在左端</p>
      <div class="flex-container flex-1-1">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
      </div>

      <p>row-reverse：主轴为水平方向，起点在右端</p>
      <div class="flex-container flex-1-2">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
      </div>

      <p>column：主轴为垂直方向，起点在上沿</p>
      <div class="flex-container flex-1-3">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
      </div>

      <p>column-reverse：主轴为垂直方向，起点在下沿</p>
      <div class="flex-container flex-1-4">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
      </div>
    </div> -->

    <!-- 2.flex-wrap 属性 -->
    <!-- <div>
      <h2>2.flex-wrap 属性</h2>

      <p>nowrap（默认）：不换行</p>
      <div class="flex-container flex-2-1">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
        <div class="flex-item">5</div>
        <div class="flex-item">6</div>
        <div class="flex-item">7</div>
      </div>

      <p>wrap：换行，第一行在上方</p>
      <div class="flex-container flex-2-2">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
        <div class="flex-item">5</div>
        <div class="flex-item">6</div>
        <div class="flex-item">7</div>
      </div>

      <p>wrap-reverse：换行，第一行在下方</p>
      <div class="flex-container flex-2-3">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
        <div class="flex-item">5</div>
        <div class="flex-item">6</div>
        <div class="flex-item">7</div>
      </div>
    </div> -->

    <!-- 3.flex-flow 属性 -->
    <!-- <div>
      <h2>3.flex-flow 属性</h2>
      <div class="flex-container flex-3">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
        <div class="flex-item">5</div>
        <div class="flex-item">6</div>
        <div class="flex-item">7</div>
      </div>
    </div> -->

    <!-- 4.justify-content 属性 -->
    <!-- <div>
      <h2>4.justify-content 属性</h2>

      <p>flex-start（默认值）：左对齐（flex-direction: row）</p>
      <div class="flex-container flex-4-1">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
      </div>

      <p>flex-end：右对齐（flex-direction: row）</p>
      <div class="flex-container flex-4-2">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
      </div>

      <p>center： 居中（水平居中）</p>
      <div class="flex-container flex-4-3">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
      </div>

      <p>space-between：Flex 项目之间的间隔都相等</p>
      <div class="flex-container flex-4-4">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
      </div>

      <p>
        space-around：每个 Flex
        项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍
      </p>
      <div class="flex-container flex-4-5">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
      </div>
    </div> -->

    <!-- 5.align-items 属性 -->
    <!-- <div>
      <h2>5.align-items 属性</h2>

      <p>
        stretch（默认值）：如果 Flex 项目未设置交叉轴方向的大小或设为
        auto，将占满整个容器交叉轴方向的大小
      </p>
      <div class="flex-container flex-5-1">
        <div class="flex-item">1</div>
        <div class="flex-item item-tall">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item item-tall">4</div>
      </div>

      <p>flex-start：交叉轴的起点对齐</p>
      <div class="flex-container flex-5-2">
        <div class="flex-item">1</div>
        <div class="flex-item item-tall">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item item-tall">4</div>
      </div>

      <p>flex-end：交叉轴的终点对齐</p>
      <div class="flex-container flex-5-3">
        <div class="flex-item">1</div>
        <div class="flex-item item-tall">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item item-tall">4</div>
      </div>

      <p>center：交叉轴的中点对齐（垂直居中）</p>
      <div class="flex-container flex-5-4">
        <div class="flex-item">1</div>
        <div class="flex-item item-tall">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item item-tall">4</div>
      </div>

      <p>baseline: Flex 项目的第一行文字的基线对齐</p>
      <div class="flex-container flex-5-5">
        <div class="flex-item">S</div>
        <div class="flex-item item-tall">p</div>
        <div class="flex-item">q</div>
        <div class="flex-item item-tall">h</div>
      </div>

      <img src="./baseline.png" alt="baseline" />
    </div> -->

    <div>
      <h2>6.align-content 属性</h2>

      <p>stretch（默认值）：主轴线平分 Flex 容器交叉轴方向上的空间</p>
      <div class="flex-container container-tall flex-6 flex-6-1">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
        <div class="flex-item">5</div>
        <div class="flex-item">6</div>
        <div class="flex-item">7</div>
        <div class="flex-item">8</div>
        <div class="flex-item">9</div>
      </div>

      <p>flex-start：与交叉轴的起点对齐</p>
      <div class="flex-container container-tall flex-6 flex-6-2">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
        <div class="flex-item">5</div>
        <div class="flex-item">6</div>
        <div class="flex-item">7</div>
        <div class="flex-item">8</div>
        <div class="flex-item">9</div>
      </div>

      <p>flex-end：与交叉轴的终点对齐</p>
      <div class="flex-container container-tall flex-6 flex-6-3">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
        <div class="flex-item">5</div>
        <div class="flex-item">6</div>
        <div class="flex-item">7</div>
        <div class="flex-item">8</div>
        <div class="flex-item">9</div>
      </div>

      <p>center：与交叉轴的中点对齐</p>
      <div class="flex-container container-tall flex-6 flex-6-4">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
        <div class="flex-item">5</div>
        <div class="flex-item">6</div>
        <div class="flex-item">7</div>
        <div class="flex-item">8</div>
        <div class="flex-item">9</div>
      </div>

      <p>space-between：与交叉轴两端对齐，轴线之间的间隔平均分布</p>
      <div class="flex-container container-tall flex-6 flex-6-5">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
        <div class="flex-item">5</div>
        <div class="flex-item">6</div>
        <div class="flex-item">7</div>
        <div class="flex-item">8</div>
        <div class="flex-item">9</div>
      </div>

      <p>
        space-around：每根轴线两侧的间隔都相等，
        所以轴线之间的间隔比轴线与边框的间隔大一倍
      </p>
      <div class="flex-container container-tall flex-6 flex-6-6">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
        <div class="flex-item">5</div>
        <div class="flex-item">6</div>
        <div class="flex-item">7</div>
        <div class="flex-item">8</div>
        <div class="flex-item">9</div>
      </div>
    </div>

    <script>
      // 1.flex-direction
      // 决定主轴的方向（即 Flex 项目的排列方向）
      // flex-direction: row（默认值） | row-reverse | column | column-reverse;

      // 2.flex-wrap
      // 默认情况下，Flex 项目都排在一条轴线上
      // flex-wrap 属性定义了如果一条轴线排不下，如何换行
      // flex-wrap: nowrap（默认值） | wrap | wrap-reverse;

      // 3.flex-flow
      // flex-direction 和 flex-wrap 的简写形式
      // flex-flow: <flex-direction> || <flex-wrap>;
      // 默认值为 row nowrap

      // 4.justify-content
      // 定义了 Flex 项目在主轴上的对齐方式
      // justify-content: flex-start（默认值） | flex-end | center | space-between | space-around;

      // 5.align-items
      // 定义了 Flex 项目在交叉轴上如何对齐
      // align-items: stretch（默认值）  | flex-start | flex-end | center | baseline;

      // 6.align-content
      // 定义了存在多根主轴线时，Flex 项目在交叉轴上如何对齐
      // 如果项目只有一根主轴线，该属性不起作用
      // align-content: stretch（默认值） | flex-start | flex-end | center | space-between | space-around;
    </script>
  </body>
</html>
